<template>
  <div class="chat-list-container" ref='wrapper'>
    <div class="chat-list">
      <ChatItem
        v-for="item in chatList"
        :key="item.contactId"
        :name="item.name"
        :avatar="item.avatar"
        :msg="item.latestMessage"
        :time="item.latestTime"
        :unread="item.unread"
        :online="item.online"
        @click="onClick(item.contactId)"
        v-longpress:600="(e) => {handleLongpress(e,item.contactId)}"
      />
    </div>
    <PopMenu
      :coordinate="coordinate"
      :actions="actions"
      :show="show"
      @overlay-click="hidePopMenu"
      @menu-click="menuClick"
    />
  </div>
</template>

<script>
import ChatItem from '@/components/ChatItem'
import PopMenu from '@/components/PopMenu'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ChatList',
  components: {
    ChatItem,
    PopMenu
  },
  data() {
    return {
      loading: false,
      finished: true,
      scroll: null,
      show: false,
      coordinate: {
        x: 0,
        y: 0
      },
      longpressId: null
    }
  },
  computed: {
    ...mapGetters(['chatList']),
    longpressItem() {
      if (this.longpressId == null) return {}
      return this.chatList.find(item => item.contactId === this.longpressId) || {}
    },
    actions() {
      let unreadOpt
      if (this.longpressItem.unread === 0) {
        unreadOpt = { key: 'setUnread', text: '标记为未读', icon: 'bulb-o' }
      } else {
        unreadOpt = { key: 'setRead', text: '标记为已读', icon: 'certificate' }
      }
      return [
        { key: 'deleteChat', text: '删除该对聊天', icon: 'delete-o' },
        unreadOpt,
        { key: 'top', text: '置顶该聊天', icon: 'upgrade' }
      ]
    }
  },
  methods: {
    ...mapActions({ deleteChatItem: 'chatList/deleteChatItem', setChatUnread: 'chatList/setChatUnread' }),
    onClick(id, name) {
      this.$router.push({
        name: 'ChatInfo',
        params: { id },
        query: { title: name }
      })
    },
    handleLongpress(e, id) {
      this.coordinate.x = e.changedTouches[0].pageX
      this.coordinate.y = e.changedTouches[0].pageY
      this.longpressId = id
      this.show = true
    },
    hidePopMenu() {
      this.show = false
      this.longpressId = null
    },
    menuClick(key) {
      const actionMap = {
        deleteChat: this.deleteChat,
        setUnread: this.setUnread,
        setRead: this.setRead,
        top: this.todo
      }
      const func = actionMap[key]
      if (func && typeof func === 'function') {
        func()
      }
      this.hidePopMenu()
    },
    deleteChat() {
      if (!this.longpressItem) return
      const contactId = this.longpressItem.contactId
      this.deleteChatItem(contactId)
    },
    setUnread() {
      this.setChatUnread({ contactId: this.longpressId, unread: 1 })
    },
    setRead() {
      this.setChatUnread({ contactId: this.longpressId, unread: 0 })
    },
    todo() {
      console.log('todo')
    }
  }
}
</script>
<style lang="scss" scoped>
.chat-list-container {
  background: #fff;
  padding: $nav-bar-height 0 $tab-bar-height;
}
</style>
